<template>
  <!-- <div>123</div> -->
  <ve-liquidfill
    :data="chartData"
    height="100%"
    :settings="chartSettings"
  ></ve-liquidfill>
</template>

<script>
//  动态颜色
function getColor(value) {
  console.log(value);
  // return "#999";
  return value > 0 && value <= 0.5
    ? "rgba(97,216,0,0.7)"
    : value > 0.5 && value <= 0.8
    ? "rgba(204,178,26,0.7)"
    : value > 0.8
    ? "rgba(214,47,28,0.7)"
    : "#c7c7cb";
}
export default {
  data() {
    return {
      chartData: {
        // percent  百分比
        columns: ["title", "percent"],
        rows: [
          {
            title: "rate",
            percent: 0.5,
          },
        ],
      },
      // 水球图样式
      chartSettings: {},
    };
  },
  created() {},
  mounted() {
    this.chartSettings = {
      seriesMap: {
        rate: {
          radius: "80%", //半径
          // 标签
          label: {
            normal: {
              formatter: function (v) {
                console.log(v);
                let mse = parseInt(v.data.value * 100);
                return `${mse}%`;
              },
              // 文字样式
              textStyle: {
                // normal: {
                fontSize: 36,
                color: "#999",
                // color: "",
                // color: "#1e88da",

                fontWeight: 500,
                // },
              },

              position: ["50%", "50%"], // 文字位置
              insideColor: "#fff", //水波与文字重叠后文字展示的颜色
            },
          },
          // 外轮廓样式
          outline: {
            itemStyle: {
              borderColor: "#acacac",
              borderWidth: 1,
              color: "none",
              shadowBlur: 0,
              shadowcolor: "#fff",
            },
            borderDistance: 0, //外边框与内边框的距离
          },
          // 背景颜色
          backgroundStyle: {
            color: "#fff",
          },
          // 全局样式
          itemStyle: {
            shadowBlur: 0, //阴影处理
            shadowcolor: "#fff",
          },
          amplitude: 8, //振幅
          color: [getColor(this.chartData.rows[0].percent)], //动态取色
          // color: ["#99ff33"],
        },
      },
    };
  },
};
</script>

<style>
</style>